<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/public.css" rel="stylesheet" />
	</head>

	<body>
		
		<!-- div.mui-content -->
		<div class="mui-content">
			<!-- 轮播图 -->
			<!-- msl -->
			<div class="mui-slider">
			  <div class="mui-slider-group mui-slider-loop">
				<!--第四个内容区-->
				<div class="mui-slider-item mui-slider-item-duplicate">
				<!-- 具体内容 -->
				<img src="../images/EmptyBanner3.jpg" alt="" class="guide-img">
				</div>
				  
				<!--第一个内容区容器-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="../images/EmptyBanner.jpg" alt="" class="guide-img">
				</div>
				
				<!--第二个内容区-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="../images/EmptyBanner1.jpg" alt="" class="guide-img">
				</div>
				
				<!--第三个内容区-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="../images/EmptyBanner2.jpg" alt="" class="guide-img">
				</div>
				
				<!--第四个内容区-->
				<div class="mui-slider-item">
				  <!-- 具体内容 -->
				  <img src="../images/EmptyBanner3.jpg" alt="" class="guide-img">
				</div>
				
				<!--第一个内容区容器-->
				<div class="mui-slider-item mui-slider-item-duplicate">
				  <!-- 具体内容 -->
				  <img src="../images/EmptyBanner.jpg" alt="" class="guide-img">
				</div>
			  </div>
				
				<!-- 记得改点的颜色 -->
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			
			<!-- 菜单内容 -->
			<!--服务-->
			<div class="home-listbox bs-bb bgc-ff">
				<div class="serviceTitle">
					<span class="listFontSize">服&nbsp;&nbsp;&nbsp;&nbsp;务</span>
				</div>
				
				<!-- mrw -->
				<div class="mui-row row-imgbox fatherbox">
					<div class="mui-col-xs-3 publicjumppage" data-id="home-identificationCard">
						<div class="ta-c imgbox">
							<img src="../images/sfz.png" alt="" />
						</div>
						<div class="smFontSize ta-c">身份归属</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage" data-id="home-banks">
						<div class="ta-c imgbox">
							<img src="../images/yhk.png" alt="" />
						</div>
						<div class="smFontSize ta-c">银行查询</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage" data-id="home-belongingTo">
						<div class="ta-c imgbox">
							<img src="../images/gsd.png" alt="" />
						</div>
						<div class="smFontSize ta-c" >手机归属地</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/hlzh.png" alt="" />
						</div>
						<div class="smFontSize ta-c">银行汇率</div>
					</div>
				</div>
				
				<div class="mui-row row-imgbox fatherbox">
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/fy.png" alt="" />
						</div>
						<div class="smFontSize ta-c">翻译</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/sb.png" alt="" />
						</div>
						<div class="smFontSize ta-c">设备信息</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/sc.png" alt="" />
						</div>
						<div class="smFontSize ta-c">身材计算</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/ip.png" alt="" />
						</div>
						<div class="smFontSize ta-c">IP查询</div>
					</div>
				</div>
			</div>
			
			<!--待开发想-->
			<div class="home-listbox bs-bb bgc-ff">
				<div class="serviceTitle">
					<span class="listFontSize">开发中...</span>
				</div>
				<!--第一排-->
				<div class="mui-row row-imgbox nofatherbox">
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/gjj.png" alt="" />
						</div>
						<div class="smFontSize ta-c">公积金计算</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/kd.png" alt="" />
						</div>
						<div class="smFontSize ta-c">全国快递</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/gj.png" alt="" />
						</div>
						<div class="smFontSize ta-c">公交地铁</div>
					</div>
					<div class="mui-col-xs-3 publicjumppage">
						<div class="ta-c imgbox">
							<img src="../images/sl.png" alt="" />
						</div>
						<div class="smFontSize ta-c"></div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="../js/mui.js"></script>
		<script src="../js/public.js"></script>
		<script type="text/javascript">
			mui.init()
			
			// 设置轮播图的自动循环
			// 获取DOM对象，可以使用mui()的方式，也带有隐式迭代，可以指定多个对象
			let sliderImg = mui('.mui-slider');	//DOM对象
			sliderImg.slider({
				interval: 3000
			})
			
			//预加载子页面
			mui.plusReady(function () {
			    mui.preload({
			    	url:'home-banks.html',
			    	id:'home-banks'
			    });
				mui.preload({
					url:'home-belongingTo.html',
					id:'home-belongingTo'
				});
				
			})
		</script>
	</body>

</html>
